<template>
	<view v-cloak class="bg" v-for="(item,index) in store?.state?.datas" :key="index">
		<view v-if="item.banners">
			<view v-if="item.name"> {{item?.name}}</view>
			<view class="banner" v-if="item.banners">
				<view class="page-section swiper">
					<swiper :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
						:indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="items in item.banners" :key="items">
							<image @click="getxiangqing(items.id)" :src="items.cover" mode="widthFix"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- <view v-else-if="item.shortCut">
			<view v-if="item.name"> {{item?.name}}</view>
			<view class="tag" v-if="item.shortCut">
				<view v-for="(items,index) in item.shortCut" :key="index">
					<view >
						<image :src="items.cover" mode=""></image>
					</view>
					<view>
						{{items.name}}
					</view>
				</view>
			</view>
		</view> -->
		<view v-else-if="item.more">
			<view v-if="item.name"> {{item?.name}}</view>
			<view class="bangdan" v-if="item.more">
				<view v-for="(items,index) in item.list" :key="index">
					<view v-if="index<3" class="img">
						<image  class="headerImg"
							:src="`https://m.yuedu.163.com/assets/mobile/images/index18/icon_0${index+1}.png?5b202029`">
						</image>
					</view>
					<view>
						<image @click="getxiangqing(items.id)" class="images" :src="items.cover" mode="widthFix"></image>
					</view>
					<view>{{items.title}}</view>
				</view>
			</view>
		</view>
		<view v-else-if="item.list">
			<view v-if="item.name"> {{item?.name}}</view>
			<view class="leftImgRightContext" v-if="item?.list">
				<view v-for="(items,index) in item?.list" :key="index">
					<view class="img">
						<image  @click="getxiangqing(items.id)" :src="items.cover" ></image>
					</view>
					<view>
						<view>{{items.title}}</view>
						<view>{{items.author}}</view>
						<view>{{items.content}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script setup>
	import {
		useStore
	} from 'vuex';
	import {
		ref
	} from 'vue';

	let store = useStore()
	let indicatorDots = ref(false)
	let autoplay = ref(true)
	let interval = ref(3000)
	let duration = ref(500)
	let indicatorColor = ref("#000000")
	let indicatorActiveColor = ref("#f8f8f8")
	const getxiangqing = (id) => {
		store.commit('updatexiangqing',id)
		uni.navigateTo({
			url:'/pages/xiangqing/xiangqing'
		});
	}
</script>

<style lang="scss" scoped>

	
	.bg {
		width: 700rpx;
		margin: 0 auto;
		
		>view {
			>view:nth-child(1) {
				font-size: 35rpx;
				margin-top: 30rpx;
				font-weight: 600;
			}
		}
	}
	.leftImgRightContext {
		width: 700rpx;
		margin: 0 auto;

		>view {
			margin-top: 25rpx;
			display: flex;
			flex-wrap: nowrap;

			image {
				width: 180rpx;
				height: 245rpx;
			}

			>view:nth-child(2) {
				margin-left: 20rpx;
				width: 500rpx;

				>view:nth-child(1) {
					font-size: 30rpx;
					font-weight: 600;
				}

				>view:nth-child(2) {
					font-size: 20rpx;
					color: $color3;
					margin: 30rpx 0rpx;
				}

				>view:nth-child(3) {
					font-size: 25rpx;
					color: $color3;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; //行数需设置
					line-clamp: 3;
					-webkit-box-orient: vertical;

				}
			}
		}

	}
	.img{
		box-shadow:rgba(0,0,0,.2)  0 1px 5px 0px;
	}

	.bangdan {
		display: flex;
		flex-wrap: nowrap;
		width: 700rpx;
		margin: 0 auto;
		text-align: center;
		justify-content: space-between;
		align-items: center;
		font-size: 20rpx;
		color: $color3;
		margin-top: 40rpx;
		.img{
			overflow: hidden;
			image{
				position: relative;
				top: -10rpx;
			}
		}
		.headerImg {
			width: 220rpx;
			
			height: 50rpx;
			z-index: 999;
			position: relative;
			top: -26rpx;

		}

		.images {
			width: 220rpx;
			height: 300rpx;
			position: relative;
			top: -10rpx;
			z-index: 9999;
			background-color: #ffffff
		}

		>view>view:nth-child(3) {
			width: 220rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

		}

		>view>view:nth-child(1) {
			width: 220rpx;
			height: 10rpx;
			background-color: #000000;

		}

	}

	.tag {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1rpx solid #f4f4f4;

		>view {
			text-align: center;
			padding: 15rpx;
			margin: 10rpx;
		}

		::v-deep image {
			width: 90rpx;
			height: 90rpx;
		}

		font-size: 24rpx;
	}

	.banner {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		
		.swiper {
			width: 700rpx;
			margin: 0 auto;
			background-color: #ffffff;
		}

		.swiper-item {
			width: 700rpx;
			height: 210rpx;
			margin: 0 auto;
			::v-deep image {
				display: block;
				width: 700rpx;
				height: 50rpx !important;
				margin: 0 auto;
				border-radius: 25rpx;
			}
		}
	}
</style>
